<template>
  <div id="revise">
    <div class="content">
      <div class="text-size-md orange">经验值:{{$store.state.xp}} </div>
      <div class="errorInfo">
        <P class="text-size-md errorAnswer">错误答案:{{errorAnswer}}</P>
        <h3 class="text-size-lg">{{form}}</h3>
        <p>释义:</p>
        <p class="explan">{{meaning}}</p>
      </div>
    </div>
    <div>
      <p class="sub animated fadeInUp">-1</p>
    </div>
    <bottom-btn orangeUrl="/revise" greenUrl="/index" textGreen="返回首页" textOrange="继续复习" position="fixed"></bottom-btn>
  </div>
</template>

<script>
  import bottomBtn from '../components/bottomBtn.vue'
  export default{
    data(){
      return {
        "errorAnswer":"",
        "number":0,
        "form":'',
        "meaning":'',
        "nsrc":""
      }
    },
    methods:{
      getword:function(){
        var xmlhttp,state;
        xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function(){
          if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
            state = JSON.parse(xmlhttp.responseText).data;
          }else{

          }
        }
        xmlhttp.open('GET','/api/words',false);
        xmlhttp.send();
        let n = this.number;
        this.form = state[n].form;
        this.meaning = state[n].meaning;
        this.nsrc = state[n].nsrc;
      }
    },
    components:{bottomBtn},
    mounted:function(){
      this.errorAnswer = this.$route.query.word;
      this.number = this.$route.query.number;
//      console.log(this.$route.params);
//      console.log(this.$route.hash)

      this.getword();
    }
  }
</script>

<style scoped lang="less">

  @import "../assets/css/variables.less";
  .content{
    padding:20px;
  }
  div.errorInfo{
    border:1px solid @gray-light;
    border-radius: 2px;
    margin:30px 0;
  }
  p{padding:10px;}
  p.errorAnswer{
    color:@white;
    background:@orange;
  }
  h3{
    text-align:center;
    margin:20px 0;
    color:@orange;
  }
  p.explan{
    text-indent: 2em;
  }
  .sub{
    font-size:300%;
    margin:50px 0;
    text-align:center;
    color:@green;
  }
</style>
